<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="spring"
	uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>租车投诉</title>
<link rel="stylesheet" href="../../css/bootstrap.min.css"> 
<style type="text/css">
#myDiv {
	width: 660px;
	margin-left: 100px;
	margin-top: 70px;
}

#complaintBtn {
	margin-left: 140px;
}
#reasonID{
	color:blue;
}
#reasonArea{
	margin-left: 70px;
}
#complainBtn{
	float: right;
}
#reasonMessage{
	margin-left: 70px;
	color: red;
}
</style>
</head>
<body>
	<div id="myDiv">
	<spring:form action="addComplaintRecord.do" method="post" commandName="complaintrecord"
		 onsubmit="return checkReason()" >
		<input type="hidden" id="recordID" name="recordID" >
		<table class="table table-striped table-bordered" id="recordTable">
			<tr>
				<td>出租车位</td>
				<td>开始时间</td>
				<td>结束时间</td>
				<td>包租婆</td>
			</tr>
		</table>
		<br/>
		<br/>
		<br/>
		<label id="reasonID">投诉理由：</label>
		<br/>
		<br/>
		<textarea id="reasonArea" name="reason" rows="5" cols="60" style="resize:none;"
			onblur="checkReason()" onfocus="cleanMessage()"	></textarea>
		<br/><label id="reasonMessage"></label>
		<spring:errors path="reason" delimiter=","></spring:errors>
		<br/>
		<br/><br/>
		<button type="submit" id="complainBtn" class="btn btn-danger">投诉</button>
		</spring:form>
	</div>
	<script type="text/javascript" src="../../js/jquery-3.1.0.min.js"></script>
	<script type="text/javascript">
		$(function() {
			init();
		});
		function init() {
			findRecord();			
		};
		// 通过记录ID 找到record 记录   联表查数据 填充表格
		function findRecord() {
			$("#recordID").val(eval(<%= request.getParameter("recordID")%>));
			var recordID = $("#recordID").val();
			$.ajax({
				type : "POST",
				url : "findRecordById.do",
				data : {
					"recordID":recordID
				},
				success : function(result) {
					var beginDate = new Date(result[3]);
					var endDate = new Date(result[4]);
					var table;
					table = table
						+ "<tr id="+result[0]+"><td>"
						+ result[1]
						+ result[2]
						+ "</td><td>"
						+ beginDate.getFullYear()+"年"+(beginDate.getUTCMonth()+1)+"月"+
							beginDate.getUTCDate()+"日"+beginDate.getHours()+"时"
						+"</td><td>"
						+ endDate.getFullYear()+"年"+(endDate.getUTCMonth()+1)+"月"+
							endDate.getUTCDate()+"日"+endDate.getHours()+"时"
						+ "</td><td>"
						+ result[5]
						+ "</td></tr>";
					$("#recordTable tr:gt(0)").remove();
					var myTable = $("#recordTable").append(table);
				}
		});
	};
	function checkReason(){
		var reason = $("#reasonArea").val();
		var reg = /^[\u4E00-\u9FA5]{5,50}$/;
		if(!reg.test(reason)){
			$("#reasonMessage").html("投诉理由应该在5-50个汉字之间");
			return false;
		}else{
			return true;
		}
	}
	function cleanMessage(){
		$("#reasonMessage").html("");
	}
	</script>
	
</body>
</html>
